<template>
  <div class="app-container">
    <el-row :gutter="20">
      <!--部门数据-->
      <el-col :span="4" :xs="24">
        <div class="head-container">
          <el-tree
              :data="deptOptions"
              :props="{ label: 'label', children: 'children' }"
              :expand-on-click-node="false"
              :filter-node-method="filterNode"
              ref="deptTreeRef"
              node-key="id"
              highlight-current
              default-expand-all
              @node-click="handleNodeClick"
          />
        </div>
      </el-col>
      <!--用户数据-->
      <el-col :span="20" :xs="24">
        <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="68px">
          <el-form-item label="时间节点(天)" prop="surveyStartTime" label-width="112px">
            <div class="block">
              <el-date-picker
                  v-model="valuetime4"
                  type="Date"
                  placeholder="请选择时间"
              />
            </div>
          </el-form-item>
          <el-form-item label="时间节点(月)" prop="surveyStartTime" label-width="112px">
            <div class="block">
              <el-date-picker
                  v-model="valuetime2"
                  type="month"
                  placeholder="请选择时间"
              />
            </div>
          </el-form-item>
          <el-form-item label="时间节点(范围)" prop="surveyStartTime" label-width="112px">
            <el-date-picker
                v-model="value1"
                type="datetimerange"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                :default-time="defaultTime2"
            />
          </el-form-item>
        </el-form>
        <el-row type="flex" justify="end">
          <el-col :span="18">
            <!-- Your content here -->
          </el-col>
          <el-col :span="6" style="text-align: right">
            <el-statistic title="总计" :value="outputValue" />
          </el-col>
        </el-row>
        <el-table v-loading="loading" :data="surveyLogList" :default-sort="defaultSort" @sort-change="handleSortChange" border >
          <el-table-column label="调查人" align="center" prop="surveyUserName" />
          <el-table-column v-if="valuetime4" label="当日" align="center" prop="surveyUserPrice" />
          <el-table-column v-if="valuetime2" label="本月" align="center" prop="surveyUserPrice" />
          <el-table-column v-if="value1" label="范围" align="center" prop="surveyUserPrice" />
        </el-table>
        <pagination
            v-show="total > 0"
            :total="total"
            v-model:page="queryParams.pageNum"
            v-model:limit="queryParams.pageSize"
            @pagination="getList"
        />
      </el-col>
    </el-row>
  </div>
</template>
<style scoped>
.el-button .custom-loading .circular {
  margin-right: 6px;
  width: 18px;
  height: 18px;
  animation: loading-rotate 2s linear infinite;
}
.el-button .custom-loading .circular .path {
  animation: loading-dash 1.5s ease-in-out infinite;
  stroke-dasharray: 90, 150;
  stroke-dashoffset: 0;
  stroke-width: 2;
  stroke: var(--el-button-text-color);
  stroke-linecap: round;
}
</style>
<script setup name="User">
const value1 = ref('')
const defaultTime2 = [new Date(2000, 1, 1, 18, 0, 0), new Date(2000, 2, 1, 12, 0, 0)];
const valuetime4 = ref('')
const valuetime2 = ref('')
const hasAdminRole = checkRole(["admin"]); // 调用 checkRole 函数并传递包含 "admin" 的数组作为参数
const surveyLogList = ref([]);
import { checkRole } from "@/utils/permission.js"; // 权限判断函数
const source = ref(0)
// 获取用户权限
import useUserStore from '@/store/modules/user.js'
const userid = useUserStore().id;


import {deptTreeSelect } from "@/api/system/user.js";
import {
  listSurveyLog,
  listSurveyLogByid
} from "@/api/survey/Financialjournal.js";

const { proxy } = getCurrentInstance();
import {dayjs} from "element-plus";
const open = ref(false);
const loading = ref(true);
const showSearch = ref(true);
const ids = ref([]);
const single = ref(true);
const multiple = ref(true);
const total = ref(0);
const title = ref("");
const deptName = ref("");
const deptOptions = ref(undefined);
const data = reactive({
  form: {},
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    userName: undefined,
    phonenumber: undefined,
    status: undefined,
    deptId: undefined
  }
});

let identification = 0;
import { useTransition } from '@vueuse/core'
const outputValue = useTransition(source, {
  duration: 1500,
})
source.value = 0

const { queryParams, form, rules } = toRefs(data);

/** 通过条件过滤节点  */
const filterNode = (value, data) => {
  if (!value) return true;
  return data.label.indexOf(value) !== -1;
};
/** 根据名称筛选部门树 */
watch(deptName, val => {
  proxy.$refs["deptTreeRef"].filter(val);
});
/** 查询部门下拉树结构 */
function getDeptTree() {
  deptTreeSelect().then(response => {
    deptOptions.value = response.data;
  });
};
/** 查询用户列表 */
function getList() {
  loading.value = true;
  if (hasAdminRole) { // 根据 hasAdminRole 的值执行相应操作
    listSurveyLog(queryParams.value,identification).then(response => {
      surveyLogList.value = response.rows;
      total.value = response.total;
      source.value = response.bigDecimal || 0;
      loading.value = false;
      if (valuetime4.value) {
        identification=1;
        fetchData(); // 使用防抖函数来处理数据获取
      }
      else if (valuetime2.value) {
        fetchData2(); // 使用防抖函数来处理数据获取
        identification=2;
      }
      else if (value1.value && value1.value.length === 2 && value1.value[0] && value1.value[1]) {
        fetchData3(); // 使用防抖函数来处理数据获取
        identification=3;
      }
    });
  } else {
    // 用户没有管理员角色,可能需要执行其他操作
    listSurveyLogByid(userid,queryParams.value,identification).then(response => {
      surveyLogList.value = response.rows;
      total.value = response.total;
      source.value = response.bigDecimal || 0;
      loading.value = false;
    });
  }
}
/** 节点单击事件 */
function handleNodeClick(data) {
  queryParams.value.deptId = data.id;
  handleQuery();
};
/** 搜索按钮操作 */
function handleQuery() {
  queryParams.value.pageNum = 1;
  getList();
};



import { watch, ref } from 'vue';
import _ from 'lodash'; // 引入 lodash，确保已经安装
const debounceDelay = 500; // 防抖延迟时间，500毫秒
const fetchData = _.debounce(() => {
  if (valuetime4.value) {
    valuetime2.value = '';
    value1.value = '';
    const formattedValueTime4 = dayjs(valuetime4.value).format('YYYY-MM-DD HH:mm:ss');
    queryParams.value.surveyStartTime = formattedValueTime4;
    if (hasAdminRole) {
      listSurveyLog(queryParams.value,1).then(response => {
        surveyLogList.value = response.rows;
        total.value = response.total;
        source.value = response.bigDecimal;
        loading.value = false;
      });
    } else {
      listSurveyLogByid(userid, queryParams.value,1).then(response => {
        surveyLogList.value = response.rows;
        total.value = response.total;
        source.value = response.bigDecimal;
        loading.value = false;
      });
    }
  }
}, debounceDelay);
const fetchData2 = _.debounce(() => {
  if (valuetime2.value) {
    valuetime4.value = '';
    value1.value = '';
    loading.value = true;
    const formattedValueTime2 = dayjs(valuetime2.value).format('YYYY-MM-DD HH:mm:ss');
    queryParams.value.surveyStartTime = formattedValueTime2;
    if (hasAdminRole) { // 根据 hasAdminRole 的值执行相应操作
      listSurveyLog(queryParams.value,2).then(response => {
        surveyLogList.value = response.rows;
        total.value = response.total;
        source.value = response.bigDecimal;
        loading.value = false;
      });
    } else {
      // 用户没有管理员角色,可能需要执行其他操作
      listSurveyLogByid(userid,queryParams.value,2).then(response => {
        surveyLogList.value = response.rows;
        total.value = response.total;
        source.value = response.bigDecimal;
        loading.value = false;
      });
    }
  }
}, debounceDelay);
const fetchData3 = _.debounce(() => {
  if (value1.value && value1.value.length === 2 && value1.value[0] && value1.value[1]) { // 确保value1是一个有效的日期范围数组，并且两个日期都有值
    valuetime4.value = '';
    valuetime2.value = '';
    loading.value = true;
    const startTime = dayjs(value1.value[0]).format('YYYY-MM-DD HH:mm:ss');
    const endTime = dayjs(value1.value[1]).format('YYYY-MM-DD HH:mm:ss');
    queryParams.value.surveyStartTime = startTime; // 添加开始时间参数
    queryParams.value.surveyStopTime = endTime; // 添加结束时间参数
    if (hasAdminRole) { // 根据 hasAdminRole 的值执行相应操作
      listSurveyLog(queryParams.value, 3).then(response => {
        surveyLogList.value = response.rows;
        total.value = response.total;
        source.value = response.bigDecimal;
        loading.value = false;
      });
    } else {
      // 用户没有管理员角色,可能需要执行其他操作
      listSurveyLogByid(userid, queryParams.value, 3).then(response => {
        surveyLogList.value = response.rows;
        total.value = response.total;
        source.value = response.bigDecimal;
        loading.value = false;
      });
    }
  }
}, debounceDelay);
watch(valuetime4, () => {
  identification=1;
  fetchData(); // 使用防抖函数来处理数据获取
});
watch(valuetime2, () => {
  fetchData2(); // 使用防抖函数来处理数据获取
  identification=2;
});
watch(value1, () => {
  fetchData3(); // 使用防抖函数来处理数据获取
  identification=3;
});
if(hasAdminRole) {
  getDeptTree();
}
getList();
</script>
